<template>
  <div>
    <a-row class="mt-10">
      <a-col :span="24">
        <a-card>
          <template #title>
            <a-space>
              <span>账单结转</span>
              <a-checkbox
                v-model:checked="showCanceledCarry"
              >
                显示作废结转
              </a-checkbox>
            </a-space>
          </template>
          <template #extra>
            <a-button
              @click.stop="handleToCarry"
              v-if="billDetail?.operateButton?.includes('transfer')"
              ghost
              :loading="addLoading"
              type="primary"
            >新建转入</a-button
            >
          </template>
          <a-table
            :dataSource="dataList"
            :columns="columns"
            :pagination="false"
            rowKey="id"
            :customRow="customRow"
          >

          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <!--  结转详情  -->
    <CarryOverDetail
      :visible="detailVisible"
      :id="detailId"
      @handleCancel="handleCancel"
      @handleRefresh="handleRefresh"
    />

    <!--  新建转入  -->
    <AmountCarryOver
      :visible="carryVisible"
      :currentBill="carryBillDetail"
      carryFrom="bill"
      @handleClose="handleCarryClose"
      @handleSuccess="handleCarrySuccess"
    />
  </div>
</template>

<script>
import {defineComponent, reactive, ref, toRefs, watch, computed} from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store";
import moment from "moment";
import { message } from "ant-design-vue";
import CarryOverDetail from "@/views/bill/BillDetail/modules/CarryOverDetail.vue";
import AmountCarryOver from "@/views/contract/NewCarryOver/modules/AmountCarryOver.vue";

export default defineComponent({
  name: "CarryOverCard",
  props: {
    billId: {
      type: [Number, String],
      default: 0,
    },
    refreshKey: {
      type: [Number, String],
      default: 0,
    },
    billDetail: {
      type: Object,
      default: () => ({}),
    }
  },
  components: {
    CarryOverDetail,
    AmountCarryOver,
  },
  setup(props, context) {
    const state = reactive({
      showCanceledCarry: false,
      columns: COLUMNS,
      sourceData: [],
      loading: false,
      detailId: 0,
      detailVisible: false,
      carryVisible: false,
      carryBillDetail: {},
      addLoading: false,
    });

    const noCancelList = computed(() => {
      return state.sourceData.filter((v) => v.status !== 5);
    })

    const dataList = computed(() => {
      return state.showCanceledCarry ? state.sourceData : noCancelList.value;
    })

    const getDataList = () => {
      request.get("/org", "/billTransfer/billTransferList", {
        bill_id: props.billId,
      }).then((res) => {
        state.sourceData = res?.list || [];
      });
    };

    const handleTableRowClick = (record) => {
      state.detailId = record.id;
      if (state.detailId) {
        state.detailVisible = true;
      }
    };

    const handleCancel = () => {
      state.detailId = 0;
      state.detailVisible = false;
    };

    const handleRefresh = () => {
      getDataList();
    };

    // 新建转入
    const handleToCarry = () => {
      state.addLoading = true;
      request
        .get("/org", "/bill/detail", {
          bill_id: props.billDetail.id,
        }).then((data) => {
        const { detail } = data;
        state.carryBillDetail = detail;
        request
          .get("/org", "/billTransfer/beforeVerify", {
            bill_id: props.billDetail.id,
          })
          .then((res) => {
            state.addLoading = false;
            state.carryVisible = true;
          }).catch(() => {
          state.addLoading = false;
        })
      }).catch(() => {
        state.addLoading = false;
      })
    };

    const handleCarryClose = () => {
      state.carryVisible = false;
    };

    const handleCarrySuccess = () => {
      handleRefresh();
      handleCarryClose();
    };

    const customRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: (e) => handleTableRowClick(record),
      };
    };

    watch(
      () => props.refreshKey,
      (val) => {
        if (val > 0) {
          getDataList();
        }
      },
      { immediate: true }
    );

    return {
      ...toRefs(state),
      dataList,
      customRow,
      handleCancel,
      handleRefresh,
      handleCarryClose,
      handleToCarry,
      handleCarrySuccess,
    };
  },
});

const COLUMNS = [
  {
    title: "对方单位",
    dataIndex: "owner_name",
    key: "owner_name",
  },
  {
    title: "转入金额",
    dataIndex: "into_amount",
    key: "into_amount",
    customRender: ({ text, record, index }) => {
      return "￥" + text;
    },
  },
  {
    title: "转出金额",
    dataIndex: "out_amount",
    key: "out_amount",
    customRender: ({ text, record, index }) => {
      return "￥" + text;
    },
  },
  {
    title: "结转时间",
    dataIndex: "created_at",
    key: "created_at",
  },
  {
    title: "审核状态",
    dataIndex: "status_txt",
    key: "status_txt",
  },
]
</script>
